<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>key的原理</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 遍历数组 -->
            <h2>人员列表</h2>
            <button @click.once="add">添加一个老刘</button>
            <ul>
                <li v-for="(p,index) in personsArr" :key="index">
                    {{p.name}} - {{p.age}}
                    <input type="text"/>
                </li>
            </ul>

        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            // 创建Vue实例
            new Vue({
                el:'#root', 
                data:{  
                    personsArr:[
                        {id:'001',name:'张三',age:18},
                        {id:'002',name:'李四',age:19},
                        {id:'003',name:'王五',age:20},
                    ]
                },
                methods: {
                    add(){
                        const p = {id:'004',name:'老六',age:21}
                        this.personsArr.unshift(p) //在数组最前面添加一个元素
                    }
                },
            })
        </script>

        
    </body>
</html>